<template>
  <el-form :model="addFormObj" label-position="top" :rules="addFormRules" ref="addFormRef" label-width="100px">
          
            <!-- 分栏组件 -->
            <add-good-tags :addFormObj="addFormObj" 
            :manyOptionList.sync="manyOptionList"
            :onlyOptionList.sync="onlyOptionList">

              <!-- 基本信息插槽 -->
              <template v-slot:goodInfo>

                <!-- 商品名称 -->
                <el-form-item label="商品名称" prop="goods_name">
                  <el-input v-model="addFormObj.goods_name"></el-input>
                </el-form-item>

                <!-- 商品价格 -->
                <el-form-item label="商品价格" prop="goods_price">
                  <el-input v-model.number="addFormObj.goods_price"></el-input>
                </el-form-item>

                <!-- 商品重量 -->
                 <el-form-item label="商品重量" prop="goods_weight">
                  <el-input v-model.number="addFormObj.goods_weight"></el-input>
                </el-form-item>

                <!-- 商品数量 -->
                 <el-form-item label="商品数量" prop="goods_number">
                  <el-input v-model.number="addFormObj.goods_number"></el-input>
                </el-form-item>

                <!-- 级联选择框 -->
                <el-form-item label="商品分类" prop="goods_cat">
                 <good-sort-list-cascader :addFormObj="addFormObj"/>
                </el-form-item>

              </template>

              <!-- 商品动态参数 -->
              <template v-slot:goodOption>

                <!-- 每一项商品参数 v-for-->
                <el-form-item v-for="item in manyOptionList" :label="item.attr_name"  :key="item.attr_id">

                  <!-- 复选框 -->
                  <el-checkbox-group v-model="item.attr_vals">
                    <el-checkbox :label="it" border v-for="(it, i) in item.attr_vals" :key="i" />
                  </el-checkbox-group>


                </el-form-item>


              </template>

              <!-- 商品静态参数 -->
              <template v-slot:manyGoodOption>
                <el-form-item-input v-for="item in onlyOptionList" :key="item.attr_id"
                :lablelName="item.attr_name" :bindData="item" bindDataName="attr_vals"/>
              </template>

              <!-- 商品图片 -->
              <template v-slot:goodPic>
                <add-good-upload :addFormObj="addFormObj"></add-good-upload>
              </template>
              
              <!-- 商品内容 -->
              <template v-slot:goodContent>
                <add-good-quil-editor :addFormObj="addFormObj"></add-good-quil-editor>
                <el-button-com text="添加商品" class="addGoodBtn" @click.native="addGood"></el-button-com>
              </template>
              
            </add-good-tags>

  </el-form>
</template>

<script>
// 组件
  import AddGoodTags from '@/views/Main/goods_manage/add_good/add_good_component/AddGoodTags';
  import GoodSortListCascader from '@/views/Main/goods_manage/add_good/add_good_component/GoodSortListCascader';
  import ElFormItemInput from '@/components/common/ElFormItemInput';
  import AddGoodUpload from '@/views/Main/goods_manage/add_good/add_good_component/AddGoodUpload';
  import AddGoodQuilEditor from '@/views/Main/goods_manage/add_good/add_good_component/AddGoodQuilEditor';
  import ElButtonCom from '@/components/common/ElButtonCom';

// 插件
import _ from 'lodash/lang'; // loadsh的lang方法

// 网络请求
import { addGood } from '@/network/addGoodRequest';

export default {
  data() {
    return {
      addFormObj: { // 核心
        goods_name: '', // 商品名称
        goods_price: '', // 商品价格
        goods_weight: '', // 商品重量
        goods_number: '', // 商品数量
        goods_cat: [], // 商品分类
        pics: [], // 上传图片(每一个文件路径都是一个对象)
        goods_introduce: '', // 商品介绍
      },
      addFormRules: { // 表单规则
        goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],
        goods_number: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],
        goods_cat: [{ required: true, message: '请输入商品重量', trigger: 'blur' }]
      },
      manyOptionList: [], // 所选级联选择框的动态属性
      onlyOptionList: [], // 静态属性列表
    }
  },
  methods: {
    addGood() { // 添加商品业务逻辑
      this.$refs['addFormRef'].validate(val => {
        // 表单未填写完整
        if (!val) {
          return this.$message.error('请将必填表单填写完整');
        } 

        // 填写完整
        
        // 深克隆 整理发起请求的参数
        const formObj = _.cloneDeep(this.addFormObj)

        formObj.goods_cat = formObj.goods_cat.join(',');        
        formObj.attrs = [...this.optionListToObj(this.manyOptionList, 'many'), ...this.optionListToObj(this.onlyOptionList, 'only')]
        // console.log(formObj);

        // 发送网络请求
        this.addGoodRequest(formObj);
        
      })
    },
    optionListToObj(arrList, type) { // 发送请求前调用，整理参数数据逻辑, 返回一个数组
      const resArr = [];
      if (type === 'many') {
        arrList.forEach(item => {
          item.attr_vals = item.attr_vals.join(' ');
          resArr.push({ attr_id: item.attr_id, attr_value: item.attr_vals })
        })

      } else if (type === 'only') {
        arrList.forEach(item => {
          resArr.push({ attr_id: item.attr_id, attr_value: item.attr_vals })
        })

      } else {
        console.log('类型有误');
        return;
      }
      return resArr;
    },
    async addGoodRequest(reqObj) { // 添加商品请求
      const { meta } = await addGood(reqObj);
      if (meta.status !== 201) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }

      // 请求成功跳转路由
      this.$router.push('/goods');
      return this.$message.success(meta.msg);
    }
  },
  components: {
    AddGoodTags,
    GoodSortListCascader,
    ElFormItemInput,
    AddGoodUpload,
    AddGoodQuilEditor,
    ElButtonCom
  }
}
</script>

<style lang="scss" scoped>
  .el-checkbox {
    margin: 0 10px 0 0 !important;
  }
  .addGoodBtn {
    margin-top: 20px;
  }
</style>